<template>
  <div id="projectManage">
    <el-card class="box-card" style="margin:15px">
      <div style="margin-bottom:10px">
        <el-button
          size="small"
          type="primary"
          icon="el-icon-document-checked"
          @click="clickAdd"
        >
          增加
        </el-button>
        <el-button size="small" @click="reload(clickAdd)">
          刷新
        </el-button>
      </div>
      <el-table
        :data="tableData"
        style="width: 100%;padding:5px;"
        :header-cell-style="{
          background: '#333333',
          color: '#ffffff',
          textAlign: 'center'
        }"
      >
        <el-table-column align="center" type="index" width="65" />
        <el-table-column align="center" prop="a" label="实验项目" />
        <el-table-column align="center" prop="b" label="指标简称" width="85" />
        <el-table-column align="center" prop="c" label="切值" />
        <el-table-column align="center" prop="d" label="单位" width="85" />
        <el-table-column align="center" prop="e" label="阳性复筛" width="85" />
        <el-table-column align="center" prop="f" label="收费标准" />
        <el-table-column align="center" prop="g" label="返还标准" />
        <el-table-column align="center" prop="h" label="更新日期" />
        <el-table-column align="center" label="操作" width="220" >
          <template slot-scope="scope">
            <el-button size="mini" type="primary" style="background:#2669F3">
              修改
            </el-button>
            <el-button size="mini" type="primary" style="background:#2669F3">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="pageIndex"
        :page-sizes="[10, 20, 30, 40, 50]"
        :page-size="pageSize"
        :total="tableData.length"
        layout="slot, total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
    <el-dialog
      :visible.sync="dialog"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      width="40%"
      title="项目增加"
    >
      <el-form
        ref="projectManageForm"
        :model="basicData"
        :rules="basicDataRules"
        label-width="120px"
        size="small"
      >
        <el-form-item label="实验项目：" prop="a">
          <el-input size="mini" v-model="basicData.a" placeholder="输入" />
        </el-form-item>
        <el-form-item label="指标简称：" prop="b">
          <el-input size="mini" v-model="basicData.b" placeholder="输入" />
        </el-form-item>
        <el-form-item label="阳性复筛：" prop="c">
          <el-input size="mini" v-model="basicData.c" placeholder="输入" />
        </el-form-item>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="Hb A上限：" prop="hb1">
              <el-input
                size="mini"
                v-model="basicData.hb1"
                placeholder="输入"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="Hb A下限：" prop="hb2">
              <el-input
                size="mini"
                v-model="basicData.hb2"
                placeholder="输入"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="Hb B上限：" prop="hb3">
              <el-input
                size="mini"
                v-model="basicData.hb3"
                placeholder="输入"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="Hb B下限：" prop="hb4">
              <el-input
                size="mini"
                v-model="basicData.hb4"
                placeholder="输入"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="单位：" prop="d">
          <el-input size="mini" v-model="basicData.d" placeholder="输入" />
        </el-form-item>
        <el-form-item label="收费标准：" prop="e">
          <el-input size="mini" v-model="basicData.e" placeholder="输入" />
        </el-form-item>
        <el-form-item label="返还标准：" prop="f">
          <el-input size="mini" v-model="basicData.f" placeholder="输入" />
        </el-form-item>
        <div class="flex" style="margin-top:40px">
          <el-button
            type="primary"
            style="background:#2669F3;width:120px"
            @click="clickSeave"
          >
            确定
          </el-button>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 验收弹窗
      dialog: false,
      // 修改样本弹窗
      innerVisible: false,
      // 修改样本数据
      sampleData: {},
      //实验项目:层级太深报错，单独抽出来
      projectIdList: ["PHE", "TSH", "17_a_0HP", "G6PD", "MSMS"],
      // 是否展示更多信息
      morderShow: true,
      // 页条数
      pageSize: 10,
      // 页数
      pageIndex: 1,
      // 表格数据
      tableData: [
        {
          id: 1,
          a: "地贫",
          b: "-",
          c: "Hb A>48 Hb B<22",
          d: "mg/dl",
          e: "开启",
          f: "20.00",
          g: "4.50",
          h: "2019-04-18"
        }
      ],
      ///////////////////////////////////////
      // 弹窗form表单数据
      basicData: {
        a: "",
        b: "",
        c: "",
        hb1: "",
        hb2: "",
        hb3: "",
        hb4: "",
        d: "",
        e: "",
        f: ""
      },
      basicDataRules: {
        a: [{ required: true, message: "请输入实验项目", trigger: "change" }],
        hb1: [{ required: true, message: "请输入Hb A上限", trigger: "change" }],
        hb2: [{ required: true, message: "请输入Hb A下限", trigger: "change" }],
        hb3: [{ required: true, message: "请输入Hb B上限", trigger: "change" }],
        hb4: [{ required: true, message: "请输入Hb B下限", trigger: "change" }]
      }
    };
  },
  methods: {
    //点击全选
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 点击增加
    clickAdd() {
      this.dialog = true;
    },
    // 新增保存
    clickSeave() {
      this.$refs.projectManageForm.validate(valid => {
        if (valid) {
          alert("ok");
        } else {
          //   console.log('error submit!!')
          return false;
        }
      });
    },
    // 点击分页
    handleSizeChange: function(val) {
      this.pageSize = val;
    },
    // 选择页码
    handleCurrentChange: function(currentPage) {
      this.pageIndex = currentPage;
    },
    // 点击行
    clickRow(v) {
      console.log(v);
      this.innerVisible = true;
      this.sampleData = v;
    }
  }
};
</script>

<style lang="less">
.flex {
  display: flex;
  align-items: center;
  justify-content: center;
}
#projectManage {
  .el-dialog__header {
    .flex;
    background: #2669f3;
    .el-dialog__title {
      color: #fff;
    }
    .el-dialog__headerbtn .el-dialog__close {
      color: #ffffff;
    }
  }
  .el-dialog__body {
    .flex;
    flex-direction: column;
    .top-list {
      width: 65%;
      .col {
        margin: 15px 0;
      }
    }
  }
  .acceptance-dialog {
    max-height: 265px;
    overflow: auto;
  }
  .but-form {
    margin: 20px 0;
  }
}
</style>
